<template>
  <div class="father">
    书包层级{{ temp[0] }}
    手表层级{{ temp[1] }}
    <VueDragResize :w="1000" :h="500" :z="temp[0]" :x="100" :y="100" :parent-limitation="true" :is-resizable="false"
      @clicked="act(0)" @dragging="dragging">
      <div style="background-color: red;width: 1000px;height: 500px;">
        <input v-model="val">

        <data-set > </data-set>
      </div>
     

    </VueDragResize>

    <VueDragResize :w="1000" :h="500" :z="temp[1]" :x="200" :y="100" :parent-limitation="true" :is-resizable="false"
      @clicked="act(1)" @activated="onActivated">
      <div style="background-color: yellow;width: 1000px;height: 500px;">
        <input v-model="val" class="">

        <data-set> </data-set>
      </div>


    </VueDragResize>
    <VueDragResize :w="1000" :h="500" :z="temp[2]" :x="200" :y="100" :parent-limitation="true" :is-resizable="false"
      @clicked="act(2)" @activated="onActivated">
      <div style="background-color: blue;width: 1000px;height: 500px;">
        <input v-model="val">

        <data-set > </data-set>
      </div>
    
    </VueDragResize>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
import DataSet from "@/components/TZ/DataSet"

export default {
  name: 'Drag',
  data() {
    return {
      temp: [0, 0, 0],
      val:"",
    }
  },
  components: {
    VueDragResize,DataSet
  },
  methods: {
    act(index) {
      for (let i = 0; i < this.temp.length; i++) {
        this.temp[i] = 10
      }
      this.temp[index] = 100
      this.$forceUpdate()
    },
  }
}
</script>
<style scoped>
.father {
  height: 100vh;
  width: 100%;
  /* border: 1px solid red; */
  position: absolute;
  margin: 0 auto;
}

.drag {
  border: 2px solid red;
}
</style>